<div class="container mt-4">
  <div class="card">
    <div class="card-header bg-warning text-dark d-flex justify-content-between align-items-center">
      <h4 class="mb-0">
        <i class="bi bi-key"></i> Application Credentials (Spoiler)
      </h4>
      <%= link_to root_path, class: "btn btn-sm btn-outline-dark" do %>
        <i class="bi bi-x-lg"></i> Close
      <% end %>
    </div>

    <div class="card-body">
      <div class="alert alert-warning" role="alert">
        <i class="bi bi-exclamation-triangle"></i>
        <strong>Warning:</strong> This is a spoiler. Are you sure you want to see the credentials?
      </div>

      <div id="creds_hidden" style="display:none">
        <table class="table table-striped table-hover table-bordered">
          <thead>
            <tr>
              <th>Email</th>
              <th>Password</th>
              <th>API Key</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="word-wrap:break-word;">admin@metacorp.com</td>
              <td>admin1234</td>
              <td>1-01de24d75cffaa66db205278d1cf900bf087a737</td>
            </tr>
            <tr>
              <td style="word-wrap:break-word;">jmmastey@metacorp.com</td>
              <td>railsgoat!</td>
              <td>2-050ddd40584978fe9e82840b8b95abb98e4786dc</td>
            </tr>
            <tr>
              <td style="word-wrap:break-word;">jim@metacorp.com</td>
              <td>alohaowasp</td>
              <td>3-eaa9b4d748d6a8c6a38e24ac1cc2204ebc3541c1</td>
            </tr>
            <tr>
              <td style="word-wrap:break-word;">mike@metacorp.com</td>
              <td>motocross1445</td>
              <td>4-c809b3d11d272cff8cab1da9e4cdf61137f29d2</td>
            </tr>
            <tr>
              <td style="word-wrap:break-word;">ken@metacorp.com</td>
              <td>citrusblend</td>
              <td>5-4af604a848ca212cfa3935352aabe9522cf89fdc</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="text-center mt-3">
        <button id="understood" class="btn btn-primary">
          <i class="bi bi-eye"></i> I understand - Show Credentials
        </button>
      </div>
    </div>

    <div class="card-footer text-center">
      <%= link_to root_path, class: "btn btn-secondary" do %>
        <i class="bi bi-arrow-left"></i> Back to Home
      <% end %>
    </div>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
  $('#understood').click(function() {
    $("#creds_hidden").show();
    $(this).hide();
  });
});
</script>
